<!--
 * @Author: chen qi
 * @Date: 2022-07-08 14:16:08
 * @LastEditors: chen qi
 * @LastEditTime: 2022-07-11 17:57:32
 * @Description: 胶囊图
-->
<template>
  <div
    :ref="`capsule${id}`"
    class="capsule-chart"
  ></div>
</template>

<script>
import commonMixin from '@/utils/mixin'
export default {
  name: 'capsuleChart',
  mixins: [commonMixin],
  props: {
    id: {
      type: [Number, String],
      default: 1
    },
    data: {
      type: Array,
      default: () => {
        return [
          {
            sort: 1,
            name: '分行1',
            value: 100
          },
          {
            sort: 2,
            name: '分行2',
            value: 90
          },
          {
            sort: 3,
            name: '分行3',
            value: 80
          },
          {
            sort: 4,
            name: '分行4',
            value: 70
          },
          {
            sort: 5,
            name: '分行5',
            value: 60
          },
          {
            sort: 6,
            name: '分行6',
            value: 50
          },
          {
            sort: 7,
            name: '分行7',
            value: 40
          },
          {
            sort: 8,
            name: '分行8',
            value: 30
          },
          {
            sort: 9,
            name: '分行9',
            value: 20
          },
          {
            sort: 10,
            name: '分行10',
            value: 10
          }
        ]
      }
    },
    // 坐标
    position: {
      type: Object,
      default: () => {
        return {
          top: '12%',
          left: '3%',
          right: '10%',
          bottom: '0%'
        }
      }
    }
  },
  data() {
    return {
      resDebounce: null,
      chart: null, // chart实例,
      option: {
        backgroundColor: 'rgba(12,17,58,1)',
        title: {
          show: false
        },
        tooltip: {
          trigger: 'item'
        },
        grid: {
          borderWidth: 0,
          top: this.position.top,
          left: this.position.left,
          right: this.position.right,
          bottom: this.position.bottom
        },
        color: '#fff',
        yAxis: [{
          type: 'category',
          inverse: true,
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          },
          data: this.data
        }],
        xAxis: {
          type: 'value',
          axisTick: {
            show: false
          },
          axisLine: {
            show: false
          },
          splitLine: {
            show: false
          },
          axisLabel: {
            show: false
          }
        },
        series: [
          {
            name: '',
            type: 'bar',
            barWidth: '8px',
            realtimeSort: true,
            itemStyle: {
              show: true,
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0,
                color: '#b1efff'
              }, {
                offset: 1,
                color: '#10c5f3'
              }], false),
              barBorderRadius: 8
            },
            emphasis: {
              shadowBlur: 15,
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            },
            data: this.data,
            label: {
              color: '#fff',
              show: true,
              position: [0, '-20px'],
              textStyle: {
                fontSize: 16
              },
              rich: {
                a: {
                  backgroundColor: new this.$echarts.graphic.LinearGradient(
                    // (x1,y1) 点到点 (x2,y2) 之间进行渐变
                    0, 0, 1, 1,
                    [
                      { offset: 0, color: '#17ce9b' }, // 0 起始颜色
                      { offset: 1, color: '#0f192b' } // 1 结束颜色
                    ]
                  ),
                  fontSize: 16,
                  padding: [0, 0, 0, 0]
                },
                b: {
                  fontSize: 12
                }
              },
              formatter: function(a, b) {
                return `{a|NO${a.dataIndex + 1}} {b|${a.name}}`
              }
            }
          },
          {
            type: 'bar',
            barWidth: '0.1px',
            barGap: '100%',
            realtimeSort: true,
            animation: true,
            itemStyle: {
              color: 'transparent'
            },
            tooltip: {
              show: false
            },
            z: -1,
            label: {
              show: true,
              position: 'right',
              fontSize: 12,
              offset: [0, -11],
              color: '#fff',
              valueAnimation: true,
              formatter: function(param) {
                return param.value
              }
            },
            data: this.data
          }
        ]
      } // 配置
    }
  },
  mounted() {
    this.chart = this.$echarts.init(this.$refs[`capsule${this.id}`])
    this.chart.setOption(this.option)
    setInterval(() => {
      let data = [
        {
          sort: 1,
          name: '分行1',
          value: Math.ceil((Math.random() * 100))
        },
        {
          sort: 2,
          name: '分行2',
          value: Math.ceil((Math.random() * 100))
        },
        {
          sort: 3,
          name: '分行3',
          value: Math.ceil((Math.random() * 100))
        },
        {
          sort: 4,
          name: '分行4',
          value: Math.ceil((Math.random() * 100))
        },
        {
          sort: 5,
          name: '分行5',
          value: Math.ceil((Math.random() * 100))
        },
        {
          sort: 6,
          name: '分行6',
          value: Math.ceil((Math.random() * 100))
        },
        {
          sort: 7,
          name: '分行7',
          value: Math.ceil((Math.random() * 100))
        },
        {
          sort: 8,
          name: '分行8',
          value: Math.ceil((Math.random() * 100))
        },
        {
          sort: 9,
          name: '分行9',
          value: Math.ceil((Math.random() * 100))
        },
        {
          sort: 10,
          name: '分行10',
          value: Math.ceil((Math.random() * 100))
        }
      ]
      data = data.sort((a, b) => b.value - a.value)
      data.forEach((item, i) => {
        item.sort = i + 1
      })
      this.option.yAxis.data = data
      this.option.series[0].data = data
      this.option.series[1].data = data
      this.chart.setOption(this.option)
    }, 3000)
    this.resDebounce = this.debounce(this.chart.resize, 300)
    window.addEventListener('resize', this.resDebounce)
  },
  destroyed() {
    window.addEventListener('resize', this.resDebounce)
  }
}
</script>

<style lang="less" scoped>
.capsule-chart {
  position: relative;
  width: 100%;
  height: 100%;
}
</style>
